
const searchData = {
    type: 'name' , // 搜索类型
    value: '', // 搜索值
}

const pageData = {
    pageSize: 3,
    currentPage: 1,
    total: 0,
    pages: 0
}

// getStudentsData();
// 发送 ajax 获取学生数据
function getStudentsData() {
    $.ajax({
        url: 'http://localhost:3000/students',
        type: 'GET',
        // dataType: 'jsonp',
        data: {
            // 搜索数据
            type: searchData.type,
            value: searchData.value,
            // 分页数据
            pageSize: pageData.pageSize, // 每页显示条数
            currentPage: pageData.currentPage, // 当前页
        },
        success(res) {
            pageData.total = res.data.total;
            pageData.pages = res.data.pages;

            const tbHtml = res.data.result.map((item, index) => {
                return `
                    <tr>
                        <td>${item._id}</td>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.gender}</td>
                        <td>${item.classesId.name}</td>
                        <td>
                            <img width="50" src="./images/${item.image || 'default.jpeg'}" alt=""/>
                        </td>
                        <td></td>
                        <td>
                            <a href="#" class="updateBtn" data-id="${item._id}">修改</a>
                            <a href="#" class="deleteBtn" data-id="${item._id}">删除</a>
                        </td>
                    </tr>
                `;
            }).join('');
            $('#studentsTb').html(tbHtml);
            $('#currentPage').text(pageData.currentPage);
            $('#pages').text(pageData.pages);
            $('#total').text(pageData.total);
            // 
            $('#from').text((pageData.pageSize * (pageData.currentPage - 1)) + 1);
            let to = pageData.pageSize * pageData.currentPage;
            if(to > pageData.total) {
                to = pageData.total;
            }
            $('#to').text(to);  
        }
    })
}

// 下一页
$('#nextPage').click(function() {
    pageData.currentPage++;
    getStudentsData();
})
// 尾页
$('#lastPage').click(function() {
    pageData.currentPage = pageData.pages;
    getStudentsData();
})
// 切换每页显示条数
$('#pageSize').change(function(){
    pageData.pageSize = $(this).val();
    pageData.currentPage = 1;
    getStudentsData();
})

// 搜索学生
$('#searchValue').keyup(function(e) {
    if(e.keyCode == 13) {
        searchData.type = $('#searchType').val();
        searchData.value = $('#searchValue').val();
        pageData.currentPage = 1;
        getStudentsData();
    }
})



// 删除学生（事件委托）
$('#studentsTb').on('click', '.deleteBtn', function (e) {
    e.preventDefault();
    const _id = $(this).data('id');

    $.ajax({
        url: '/students',
        type: 'DELETE',
        data: {
            _id
        },
        success(res) {
            if (res.code) {
                alert('删除成功');
                getStudentsData();
            } else {
                alert('删除失败');
            }
        }
    })

})
// 获取要修改的一个学生信息
$('#studentsTb').on('click', '.updateBtn', function (e) {
    e.preventDefault();
    // 获取要修改的学生的_id
    const _id = $(this).data('id');
    // 根据 _id 获取该学生的所有信息
    $.ajax({
        url: '/students/' + _id,
        type: 'GET',
        // data: {
        //     _id
        // },
        success(res) {
            if (res.code) {
                // 将获取到的学生数据，渲染到修改页面上
                const { _id, name, age, gender } = res.data;
                $('#updateStudentsName').val(name);
                $('#updateStudentsAge').val(age);
                $(`[name=updateStudentsGender][value=${gender}]`).prop('checked', true);
                $('#updateStudentsId').val(_id);
            }
        }
    })

})
// 确认修改
$('#updateStudentsBtn').click(function () {
    const name = $('#updateStudentsName').val();
    const age = $('#updateStudentsAge').val();
    const gender = $('[name=updateStudentsGender]:checked').val();
    // 学生 _id
    const _id = $('#updateStudentsId').val();

    $.ajax({
        url: '/students/updateStudents',
        type: 'POST',
        data: { _id, name, age, gender },
        success(res) {
            if(res.code) {
                alert('学生数据修改成功');
                getStudentsData();
            }
        }
    })

})

// 新增学生
$('#addStudentsBtn').click(function () {
    const name = $('#addStudentsName').val();
    const age = $('#addStudentsAge').val();
    const gender = $('[name=addStudentsGender]:checked').val();
    // 获取 select 的 value 值，实际上就是在获取 select 中被选中的 option 的 value 值；
    const classesId = $('#selectClasses').val();
    // 获取当前学生的头像图片名称
    const image = $('#showImages').data('src');

    $.ajax({
        url: '/students/addStudents',
        type: 'POST',
        data: {
            name, age, gender, classesId, image
        },
        success(res) {
            if (res.code) {
                alert('新增成功');
                getStudentsData();
            }
        }
    })

})